<template>
    <div class="main-cart-index">
        <van-empty image="error" description="购物车空" v-if="cartItems.length === 0" />
        <template v-else>
            <van-swipe-cell v-for="(item,index) in cartItems" :key="index">
                <van-card 
                    centered
                    class="cart-card" 
                    >
                        <template #title>
                            <font class="title">{{item.goods_name}}</font>
                        </template>
                        <template #thumb>
                            <img class="img" :src="item.goods_cover" />
                        </template>
                        <template #price>
                            <van-stepper @change="setCart" :name="index" :default-value="item.goods_num" theme="round" button-size="24" input-width="42px"  />
                        </template>
                        <template #num>
                            <font class="price">${{item.total_price}}<em>kg</em></font>
                        </template>
                </van-card>
                <template #right>
                    <van-button square type="danger" class="delete-button" @click="handleRemoveCart(item)" >
                        <van-icon name="delete-o" size="30" />
                    </van-button>
                </template>
            </van-swipe-cell>
            <div class="checkout">
                <div class="btn">
                    <van-button round block type="primary" native-type="submit" :to="{name: 'CartPayment'}"><strong>CheckOut</strong></van-button>
                </div>
            </div>
        </template>
    </div>
</template>

<script lang="ts" setup>
import { Dialog } from 'vant'
import { ref, watch, reactive, provide  } from 'vue'
import { useStore } from 'vuex'

const store = useStore()

const cartItems = store.getters.getCart.items

const handleRemoveCart = (item: any) => {
    Dialog.confirm({
        message: '您确认删除',
    }).then(() => {
        store.dispatch('removeCart', item.goods_id)
    });
}

const setCart = (value: number, detail: any) => {
    store.dispatch('addCart', {data: cartItems[detail.name], num: value > cartItems[detail.name].goods_num ? 1 : -1})
}

</script>

<style lang="less" scoped>
.main-cart-index {
    min-height: calc(100vh - 60px - 49px);
    .cart-card {
        margin: 0;
        background-color: #fff;
        border-bottom: 1px solid #f1f1f1;
        .title {
            font-weight: bold;
            font-size: 18px;
            line-height: 22px;
            color: #6D3805;
        }
        :deep(.van-card__thumb) {
            display: inline-flex;
            align-items: baseline;
            justify-content: center;
            .img {
                width: 70%;
            }
        }
        :deep(.van-card__bottom) {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin: 20px 0px 0px 20px;
            .van-stepper {
                background: #F4F4F4;
                box-shadow: inset 0px 0px 4px rgba(109, 56, 5, 0.2);
                border-radius: 30px;
                padding: 3px;
                button {
                    background: #fff;
                    color: #6D3805;
                    box-shadow: 0px 1px 2px rgba(109, 56, 5, 0.2);
                }
            }
            .price {
                font-size: 18px;
                line-height: 22px;
                text-align: right;
                color: #6D3805;
                em {
                    margin-left: 5px;
                    font-size: 14px;
                    font-style: normal;
                }
            }
        }
        
    }
    .delete-button {
        width: 68px;
        height: 100%;
        background: rgba(164, 43, 50, 1);
    }
    .checkout {
        height: 80px;
        .btn {
            position: fixed;
            width: calc(100vw - 32px);
            margin: 0px 16px;
            bottom: 80px;
            left: 0px;
        }
    }
}
</style>
